<template>
    <div class="lyric">   
        <audio :src="songs.data[0].src"  controls id="audio"></audio>
        <!--<v-redalert></v-redalert>-->
            <div class="matter"><!--/*轮锅图下面的内容 */-->
                <div class="matter-bottom">      
                    <div class="jf-left"><!--左半部分-->
                        <div class="jf-lycifo">
                          <div class="jf-cvrwrap"><!--专辑图-->
                            <div class="jf-cover">
                                <img class="jf-img" :src="songs.data[0].img" alt="">
                                <div class="jf-msk"></div>
                            </div>
                          </div>  
                          <div class="jf-cnt"><!--歌词部分-->
                            <div class="jf-hd">
                                <i class="jf-lab"></i>
                                <div class="jf-tit">
                                    <em class="jf-ff2">{{songs.data[0].type}}</em>
                                </div>
                            </div>
                            <p class="jf-des">
                            	歌手：
                            	<span>
                            		<a href="script:void(0)" class="jf-fc7">{{songs.data[0].auther}}</a>
                            	</span>
                            </p>
                            <p class="jf-des">
                            	发布时间：
                            	<span>
                            		<a href="script:void(0)" class="jf-fc7">2016-06-24</a>
                            	</span>
                            </p>
                             <p class="jf-des">
                            	发布公司：
                            	<span>
                            		<a href="script:void(0)" class="jf-fc7">杰威尔</a>
                            	</span>
                            </p>
                            <div class="jf-info">
                            	<div class="jf-btn2">
	                            	<a href="javascript:void(0)" class="u-btn1 " v-on:click = 'musicthar'><i>
                                    <em class="ply"></em>播放</i><a class="u-btni" href="javascript:void(0)"></a></a>
	                            	<a href="script:void(0)" class="u-btn2 jf-btn"><i>收藏</i></a>
	                            	<a href="script:void(0)" class="u-btn3 jf-btn"><i>分享</i></a>
	                            	<a href="script:void(0)" class="u-btn4 jf-btn"><i>下载</i></a>
	                            	<a href="script:void(0)" class="u-btn5 jf-btn"><i><span class="cnt_comment_count">142790</span></i></a>
                            	</div>
                            </div>
                            <div class="lyric-content">专辑简介</div><!--歌词文本-->
                          </div> 
                        </div>
                        <div class="s-songs">
                            <h2>包含歌曲列表 <span>{{songs.data.length}}首歌</span></h2> 
                           <table class="table table-striped s-border">
                                <thead>
                                    <tr class="s-tr">
                                        <th>#</th>
                                        <th colspan="2">歌曲名字</th>
                                        
                                        <th>时长</th>
                                        <th>歌手</th>
                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,index) in songs.data" >
                                        <td>{{sId[index]}}</td>
                                        <td @click='playsong(index)'><router-link to='/songpage/Songs'><span>{{item.songname}}</span></router-link></td>
                                        <td><i></i><i></i><i></i></td>
                                        <td >
                                            <span class="s-icon4">时长</span>
                                            <div class="hovershow">
                                                <a>0</a>
                                                <span class="s-icn s-ico1">1</span>
                                                <span class="s-icn s-ico2">2</span>
                                                <span class="s-icn s-ico3">3</span>
                                            </div>
                                        </td>
                                        <td>{{item.auther}}</td>
                                    </tr>
                                </tbody>
                                
                            </table>
                        </div>
                    </div>
                    <div class="jf-right"><!--右半部分-->
                        <div class="jf-wrap7">
                            <h3 class="jf-hd3"><span class="jf-fl">网易云音乐多端下载</span></h3>
                            <ul class="jf-cb">
                                <li><a href="script:void(0)"></a></li>
                                <li><a href="script:void(0)"></a></li>
                                <li><a href="script:void(0)"></a></li>
                            </ul>
                        </div>
                    </div>

                </div>     
            </div>
        <!--<v-footer></v-footer>    -->
    </div>
</template>
<script>
    export default{
        name:"lyric",
        data(){
            return{
               msg:"",
                sId : [1,2,3,4,5,6,7,8,9,10,11]
               
            }
        },
        created:function(){},
        components:{},
        methods:{
            playsong:function(index){
                let dmusic = this.songs.data[index]
                 this.$store.commit('playsongs',dmusic)

            },
            musicthar:function(){
                let musicthar = this.songs.data;
                 this.$store.commit('musicthar',musicthar)
                
            }
         },
        computed: {
        songs () {
            return this.$store.state.songs
        }
    }, 
    mounted () {}    
    }
</script>
<style scoped>
.s-icon4{
    text-align: left;
    float: left;
}
.hovershow{
text-align: left;
 float: left;
  visibility: hidden;
}
tbody tr:hover .hovershow{
    visibility: visible
}
tbody tr:hover .s-icon4{
    display: none
}
.s-icn{
   
    width: 18px;
    height: 16px;
    float: left;
}
.s-ico1{

}




.matter{
   width:100%;
   background-color: rgb(245,245,245);
   height:500px;
}
.matter-bottom{
    margin: 0 auto;
    width:985px;
    height:500px;
   background-color:#fff;
    display:left;
}
.jf-left{/*左部分的 */
    float: left;
    width:70%;
    height:500px;
    /*border: 1px solid #000;*/
}
.jf-right{
    float: right;
   padding: 20px 40px 40px 30px;
}
.jf-wrap7{
    margin: 20px 0;
    padding-bottom: 20px;
}
.jf-hd3{
position: relative;
    height: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 100%;
}
.jf-fl{
float: left;
font-size: 100%;
}
.jf-cb{

}


.jf-lycifo{
    padding: 15px;
    overflow: hidden;
    /*border: 1px solid #000;*/
    box-shadow: 0 0 15px 0 #ccc;
    width: 650px;
    margin:0 0 20px 20px;
}
.jf-cvrwrap{
    float: left;
    width: 206px;
    margin-right: -226px;
    position: relative;
}
.jf-cover{
    width: 198px;
    height: 198px;
    position: relative;
    display: block;
    float: left;
}
.jf-img{
    width: 180px;
    height: 180px;
    display: block;
    /*border: 1px solid #ccc;*/
    padding: 3px;
}
/*.jf-msk{
    display:block;
    position: absolute;
    width: 206px;
    height: 205px;
    top: -4px;
    left: -4px;
    background:url("../../../static/image/coverall.png") -140px -580px;
}*/
.jf-cnt{
    float: right;
    width: 414px;
    margin-left: 15px;
}
.jf-lab{
    float: left;
    width: 54px;
    height: 24px;
    overflow: hidden;
    vertical-align: middle;
    background:url("../../../static/img/download8.png") 0 -243px;
}
.jf-tit{
    margin-left: 64px;
    position: relative;
    top: -6px;
    font-size: 24px;
}
.jf-ff2{
margin-right: 7px;
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.jf-des{
margin: 10px 0;
color: #999;
}
.jf-des span{
color: #333;
} 
.jf-fc7{
    color: #0c73c2;
}
.jf-btn2{
    margin-bottom: 25px;
    margin-right: -10px;
}
.u-btni-addply{
    float: left;
}
.u-btn1{
    float: left;
    color: #fff;
    padding: 0 5px 0 0;
    /*display: inline-block;*/
    height: 31px;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -428px;    
}
.u-btn1 i{
      float: left;
    padding: 0 7px 0 8px;
    color: #fff;
    /*display: inline-block;*/
    height: 31px;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -387px;    
}
.ply{
    float: left;
    width: 20px;
    height: 18px;
    margin: 6px 2px 2px 0;
    overflow: hidden;
    background:url("../../../static/image/button2.png")  0 -1622px;

}
.u-btni{
    margin-right: -4px;
    width: 31px;
    margin-left: -3px;
    padding-right: 0;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png")   0 -1588px;

}
.u-btn2{
    margin-right: 6px;
    padding: 0 5px 0 5px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn2 i{
    padding-right: 2px;
    padding-left: 28px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -977px;
}
.u-btn3{
    margin-right: 6px;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn3 i{
    padding-right: 2px;
    padding-left: 28px;
    padding: 0 7px 0 36px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -1225px;
}
.u-btn4{
    margin-right: 6px;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn4 i{
    padding-right: 2px;
    padding-left: 28px;
    padding: 0 7px 0 36px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") 0 -2761px;
}
.u-btn5{
    margin-right: 6px;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn5 i{
        padding-right: 2px;
    padding-left: 28px;
    padding: 0 7px 0 36px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -1465px;
}
.cnt_comment_count{
cursor: pointer;
}
.lyric-content{
    width:414px;
    height: 200px;
    margin-top: 13px;
    line-height: 23px;
    display: inline-block;
   /*background-color:red;*/
   /*border: 1px solid #000;*/
}
.s-songs{
    height: 500px;
    padding: 0 30px;
    /*border: 1px solid red;*/
}
.s-songs>h2{
    font-size: 16px;
    margin-bottom: 15px;
}
.s-songs>h2>span{
    font-size: 12px;
    margin-left: 15px;
    color: #ccc;
}
.s-border{
    /*border: 1px solid #ccc;*/
    width: 634px;
    margin:  0 auto;
}
.s-border .s-tr{
    box-shadow: 0 1px 1px 1px #ccc;
    border-top: 2px solid red;
}
.s-border {
    /*border: 1px solid #000;*/
    box-shadow: 0 0 20px 0px #ccc
}
</style>